<template>
   <div>姓名:{{name}}</div>
   <div>年龄:{{age}}</div>
</template>





<!--
<script lang='ts'>
/**
 * 一、组合式Api的写法
 * 组合式API的写法有两种
 * 第1种:setup函数
 * setup的作用，大家可以理解为给组合式API提供了一个场所
 * 注意点：
 * 1、在setup中定义的变量，如果要在template模板中渲染，就必须要返回,注意将返回的变量放在对象中返回
 * 2、选项式API可以和组合式API混写,如果选项式API和组合式API出现同名现象，组合式API的优先级高于选项式API
 * 第2种：<script setup>属性的方式
 * 优势：1）不需要暴露变量才能访问 2)只能使用组合式API的写法
 二、为什么要使用组合式API
 1、更灵活的代码组织：选项式API这种写法代码复杂之后将一个完成逻辑，分散到了不同选项之中，不利于逻辑提取
 2、更好的逻辑复用：在选项式API中将重复代码使用mixin将其抽离出来，组合式API之中自定义hook方式来进行提取
 3、更好的类型推导
 4、更小的生产包体积
 */
export default{
  data(){
   return{
    age:23,
    name:'zhaijizhe'
   }
  },
  setup(){
    //定义了一个变量
    let name="Giles"
    return {
      name
    }
  }
}
</script>
-->
<script lang="ts" setup>
  let name="Giles"
  let age=39
</script>
<style lang='scss' scoped>
</style>